<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Vue 3 + Vue Router CDN 示例</title>
</head>

<body>
    <div id="app">
        <h1>Vue Router CDN 示例</h1>

        <!-- 导航链接 -->
        <nav>
            <router-link to="/">首页</router-link> |
            <router-link to="/about">关于</router-link> |
            <router-link to="/user/admin">用户: admin</router-link>
        </nav>

        <!-- 路由出口 -->
        <router-view></router-view>
    </div>
    <!-- 引入 Vue 3 (必须使用包含编译器的版本) -->
    <script src="../lib/vue/3/vue.global.js"></script>

    <!-- 引入 Vue Router (iife 版本，适用于浏览器) -->
    <script src="../lib/router/4/vue-router.global.js"></script>
    <script>
        const { createApp } = Vue;
        const { createRouter, createWebHashHistory, RouterLink, RouterView } = VueRouter;

        // 1. 定义组件（可以用 template 字符串）
        const Home = { template: `<div><h2>首页内容</h2><p>欢迎来到首页！</p></div>` };
        const About = { template: `<div><h2>关于页面</h2><p>这是一个关于页面。</p></div>` };
        const User = {
            template: `<div><h2>用户：{{ $route.params.id }}</h2></div>`,
            mounted() {
                console.log('当前用户ID:', this.$route.params.id);
            }
        };

        // 2. 定义路由
        const routes = [
            { path: '/', component: Home },
            { path: '/about', component: About },
            { path: '/user/:id', component: User }
        ];

        // 3. 创建路由器实例
        const router = createRouter({
            history: createWebHashHistory(), // 使用 hash 模式，适合静态页面
            // history: createWebHistory(), // 使用 history 模式，需要服务器支持
            routes
        });

        // 4. 创建 Vue 应用
        const app = createApp({});

        // 5. 使用路由插件
        app.use(router);

        // 6. 挂载应用
        app.mount('#app');
    </script>
</body>

</html>